/*-- 头部,尾部引入css --*/
@import "../public/public.css";

body{
	background: #EFF3F5;
}
.nav-fixed{
	position:fixed;
	top:0;
	z-index:10000;
}
.clear{
	clear:both;
}
@keyframes doudong {
				from,11.1%,to {
				-webkit-transform:none;
				transform:none;
			}
			22.2% {
				-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);
				transform:skewX(-12.5deg) skewY(-12.5deg);
			}
			33.3% {
				-webkit-transform:skewX(6.25deg) skewY(6.25deg);
				transform:skewX(6.25deg) skewY(6.25deg);
			}
			44.4% {
				-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);
				transform:skewX(-3.125deg) skewY(-3.125deg);
			}
			55.5% {
				-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);
				transform:skewX(1.5625deg) skewY(1.5625deg);
			}
			66.6% {
				-webkit-transform:skewX(-0.78125deg) skewY(-0.78125deg);
				transform:skewX(-0.78125deg) skewY(-0.78125deg);
			}
			77.7% {
				-webkit-transform:skewX(0.390625deg) skewY(0.390625deg);
				transform:skewX(0.390625deg) skewY(0.390625deg);
			}
			88.8% {
				-webkit-transform:skewX(-0.1953125deg) skewY(-0.1953125deg);
				transform:skewX(-0.1953125deg) skewY(-0.1953125deg);
			}
		}

/*查看更多*/
.deanseemore{
	text-align:center;
	color:#000;
	display:block;	
	width:262px;
	height:42px;
	border:1px solid #bbb;
	text-align: center;
	line-height: 42px;
	border-radius: 30px;
	font-size: 14px;
	transition: all 0.5s;
	position: relative;
	margin:0 auto;
	&:hover{
		border: 1px solid #039BE5;
		background: #039BE5;
		 color: #fff;
	}
	&:hover i{
		width:100%;
		height:100%;
		top:0;
		left:0;
	}
	i{
		position: absolute;
		display: inline-block;
		width:60%;
		height:60%;
		top:10px;
		left:50px;				
		z-index: 1;
		transition: all 0.3s;
		background-color: rgba(239,243,245,0.3);
		border-radius: 30px;
	}
}
.deantitleh2{
	margin:17px 0;
	font-size:24px;
	color:#7c7c7c;
}
/*---------------------主内容---------------------*/
/*--banner图片--*/
.content{
	width:100%;	
	.banner{
		width:1180px;
		margin:0 auto;
		margin-top:20px;
		height:350px;
		position:relative;
		ul{
			position:relative;
			z-index:1;
			height:350px;
			overflow:hidden;
			li{
				position: absolute;
				top:0;
				width:79px;
				background: green;
				transition: all 1s;
				height:350px;
				background: url(../img/img2/banner1.jpg);
				span{
					position: absolute;
					top:0;
					left:0;
					display: block;
					width:79px;
					height:350px;
					/*&:nth-child(1),&:nth-child(2),&:nth-child(3),&:nth-child(4){
						background: url(../img/img2/banner1.jpg);
					}
					*/
				}
					/*图片切割显示,对li中的span进行具体定位*/
				/*
				&:nth-child(2) {
					background-position: -79px 0;
				}
				&:nth-child(3) {
					background-position: -158px 0;
				}
				&:nth-child(4) {
					background-position: -237px 0;
				}
				&:nth-child(5) {
					background-position: -316px 0;
				}
				&:nth-child(6) {
					background-position: -395px 0;
				}
				&:nth-child(7) {
					background-position: -474px 0;
				}
				&:nth-child(8) {
					background-position: -553px 0;
				}
				&:nth-child(9) {
					background-position: -632px 0;
				}
				&:nth-child(10) {
					background-position: -711px 0;
				}
				&:nth-child(11) {
					background-position: -790px 0;
				}
				&:nth-child(12) {
					background-position: -869px 0;
				}
				&:nth-child(13) {
					background-position: -948px 0;
				}
				&:nth-child(14) {
					background-position: -1027px 0;
				}
				&:nth-child(15) {
					background-position: -1106px 0;
				}	*/							
			}
			/*对li进行定位,一个页面中分为15个li*/
			li:nth-child(1){
				left:0;				
			}
			li:nth-child(2){
				left:79px;
				background-position: -79px 0;
			}
			li:nth-child(3){
				left:158px;
				background-position: -158px 0;
			}
			li:nth-child(4){
				left:237px;
				background-position: -237px 0;
			}
			li:nth-child(5){
				left:316px;
				background-position: -316px 0;
			}
			li:nth-child(6){
				left:395px;
				background-position: -395px 0;
			}
			li:nth-child(7){
				left:474px;
				background-position: -474px 0;
			}
			li:nth-child(8){
				left:553px;
				background-position: -553px 0;
			}
			li:nth-child(9){
				left:632px;
				background-position: -632px 0;
			}
			li:nth-child(10){
				left:711px;
				background-position: -711px 0;
			}
			li:nth-child(11){
				left:790px;
				background-position: -790px 0;
			}
			li:nth-child(12){
				left:869px;
				background-position: -869px 0;
			}
			li:nth-child(13){
				left:948px;
				background-position: -948px 0;
			}
			li:nth-child(14){
				left:1027px;
				background-position: -1027px 0;
			}
			li:nth-child(15){
				left:1106px;
				background-position: -1106px 0;
			}
		}
		.nivo-directionNav{
			a{
				opacity:0;
				transition:opacity .3s;
				position:absolute;
				top:0;
				bottom:0;
				z-index:9;
				cursor:pointer;
				width:65px;
				text-indent:-99px;
				overflow:hidden;
				&:hover{
					opacity:1;
				}
			}
			.nivo-prevNav{
				background:url(../img/img2/slide-btnl.jpg) center center no-repeat;
				left:-65px;
			}
			.nivo-nextNav{
				background:url(../img/img2/slide-btnr.jpg) center center no-repeat;
				right:-65px;
			}
		}
		.nivo-controlNav{
			position:absolute;
			bottom:10px;
			text-align:center;
			z-index:10;
			width:100%;
			a.nivo-control{
				cursor:pointer;
				display:inline-block;
				padding:6px;
				margin:2px;
				transition:all 0.5s;
				span{
					display:inline-block;
					width:8px;
					height:8px;
					border:2px solid #fff;
					border-radius:50%;
					position:relative;
					background-color:transparent;
					transition:all 0.5s ease;
				}
				&.active span{
					background-color:#fff;
					transition:all 0.5s ease;
				}
			}
		}
	}
	/*--------------------中间tab切换-------------------*/
	.deanTab{
		width:1180px;
		margin:0 auto;
		margin-top:15px;
		.deanTabName{
			width:1180px;
			height:30px;
			ul li{
				float:left;
				cursor:pointer;
				height:30px;
				line-height:30px;
				border-radius:15px;
				margin-right:15px;
				padding:0 10px;
				background:#eff3f5;
				color:#2c3e50;
				font-size:15px;
				transition:all 0.5s;
				position:relative;
				&.cur{
					background:#039be5;
					color:#fff;
				}
				&:after{
					content:'';
					position:absolute;
					top:0;
					left:0;
					width:100%;
					height:100%;
					z-index:1;
					opacity:0;
					background-color:rgba(255,255,255,0.3);
					transition:all 0.3s;
					transform:scale(0.5,0.5);
				}
				&:hover:after{
					opacity:1;
					transform:scale(1,1);
				}
			}
		}
		.deanTabCon{
			margin-top:20px;
			height:990px;
			li dl dd{
				width:280px;
				height:310px;
				float:left;
				margin-right:15px;
				position:relative;
				margin-bottom:15px;
				.deancover{
					opacity:0;
					position:absolute;
					z-index:1;
					top:-16px;
					right:-14px;
					bottom:0;
					left:-14px;
					border:1px solid #ddd;
					background-color:#fff;
					box-shadow:0 0 12px rgba(0,0,0,0.1);					
				}
				.deanddimg{
					width:280px;
					height:210px;
					overflow:hidden;
					position:relative;
					z-index:2;
					img{
						transition:all 0.5s;
					}
				}
				.deanddinfo{
					width:280px;
					position:relative;
					z-index:2;
					h3{
						height:30px;
						line-height:30px;
						font-size:14px;
						a{
							color:#34495e;
							-webkit-transition:all 0.5s;
							&:hover{
								color: #5AA4E5;
							}
						}
					}
					.deanddnum{
						height:22px;
						overflow:hidden;
						font-size:12px;
						span.deantypes{
							float:left;
							height:20px;
							padding:0 5px;
							font-size:12px;
							color:#9aabb8;
							line-height:19px;
							text-align:center;
							background-color:#dfe5e9;
							border-radius:3px;
						}
						span{
							float:left;
							margin-right:10px;
							display:block;
							i.deancomment{
								background:url(../img/img2/v2.png) center center no-repeat;
								float:left;
								width:23px;
								height:20px;
								display:block;
							}
							em{
								float:left;
								font-size:14px;
								font-style:normal;
								color:#9aabb8;
							}
						}
					}
					.deanuser{
						height:25px;
						line-height:25px;
						margin-top:6px;
						a{
							display:block;
							img{
								width:25px;
								height:25px;
								border-radius:25px;
								float:left;
							}
							strong{
								font-size:12px;
								font-weight:normal;
								color:#2c3e50;
								padding-left:15px;
							}
						}
					}
					.deanline{
						width:100%;
						height:1px;
						background:#e2e8eb;
						position:absolute;
						bottom:-17px;
					}
				}
				&:hover{
					.deancover{
						opacity:1;
					}
					.deanddimg img{
						transform:scale(1.2);
					}
					.deanddinfo .deanuser strong{
						color: #5AA4E5;
					}
				} 
			}			
		}		
	}
	.deanbox{
		width:1180px;
		margin:20px auto;
	}
	/*-----------------------翻转图片部分--------------------*/
	.deanboxwrap{
		background:#eaeef1;
		padding:30px 0;
		margin-top:30px;
		height:610px;
		.deanbox{
			width:1180px;
			margin:0 auto;
			/*--左侧--*/
			.deanboxl{
				float:left;
				width:338px;
				border:1px solid #3498db;
				background:#fff;
				.deanboxltitle{
					height:142px;
					background:#3498db;
					h3{
						font-size:30px;
						display:block;
						height:35px;
						line-height:35px;
						color:#fff;
						padding:30px 0 0 30px;
					}
					span{
						font-size:14px;
						display:block;
						color:#fff;
						padding-left:30px;
						padding-top:5px;
						opacity:0.6;
					}
				}
				ul{
					padding:10px 0;
					li{
						height:32px;
						line-height:32px;
						font-size:14px;
						overflow:hidden;
						white-space:nowrap;
						text-overflow:ellipsis;
						background:url(../img/img2/blue.png) 20px 12px no-repeat;
						text-indent:40px;
						a{
							color:#7c7c7c;
							&:hover{
								color: #2980b9;
							}
						}
					}
				}
				a.deanmores{
					display:block;
					height:50px;
					line-height:50px;
					font-size:14px;
					color:#7c7c7c;
					background:#eff3f5;
					text-align:center;
					transition:all 0.5s;
					position:relative;					
					&:hover i{
						display:block;
						width:100%;
						height:100%;
						top:0;
						left:0;
						opacity:1;
					}
					i{
						position: absolute;
						display:inline-block;
						width:50%;
						height:50%;
						top:10px;
						left:80px;				
						z-index: 1;
						transition: all 0.3s;
						background-color: rgba(255,255,255,0.3);
						opacity:0;
					}
				}
			}
			/*--右侧--*/
			.deanboxr{
				float:right;
				width:840px;
				.deanul{
					li{
						width:280px;
						height:210px;
						float:left;
						background:#fff;
						.ih-item{
							width:280px;
							height:210px;
							position:relative;
							.img{
								position:absolute;
								top:0;
								left:0;
								z-index:1;
								width:280px;
								height:210px;
								transform-style:preserve-3d ;
								transform: translateZ(75px);
								
								img{
									transform-origin: 50% 100%;	
				                    -webkit-transition: transform 0.4s linear;
								}	
							}
							.info{
								position:absolute;
								top:0;
								bottom:0;
								left:0;
								right:0;
								text-align:center;
								z-index:0;
								.info-back{
									background:#1a4a72;
									width:100%;
									height:180px;
									padding-top:30px;
									h3{
										background:rgba(12,34,52,0.6);
										color:#fff;
										text-align:center;
										font-size:17px;
										padding:10px;	
									}
									p{
										font-size:13px;
										position:relative;
										color:#ccc;
										padding:20px 20px 20px;
										text-align:center;
									}
								}
							}
						}
						.deanliinfo{
							width:250px;
							height:180px;
							padding:15px;
							h6{
								font-size:16px;
								font-weight:normal;
								a{
									color:#2c3e50;
								}
							}
							.deanliinfos{
								margin-top:15px;
								height:44px;
								line-height:22px;
								overflow:hidden;
								font-size:14px;
								color:#7c7c7c;
							}
							.deanliuser{
								height:50px;
								margin-top:15px;
								.deanliuserimg{
									width:50px;
									height:50px;
									float:left;
									img{
										width:50px;
										height:50px;
										border-radius:50px;
									}
								}
								.deanliuserinfo{
									width:150px;
									margin-left:12px;
									float:left;
									a{
										color:#2c3e50;
									}
									.deanliuserinfonum{
										margin-top:10px;
										span{
											margin-right:10px;
											float:left;
											display:block;
											i{
												float:left;
												width:23px;
												height:20px;
												display:block;
											}
											i.deansee{				
												background:url(../img/img2/see.png) center center no-repeat;
											}
											em{
												float:left;
												font-size:14px;
												font-style:normal;
												color:#9aabb8;
											}
											i.deancomment{
												background:url(../img/img2/v2.png) center center no-repeat;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
	/*----------------------重复部分--------------------------*/
	.deanforumlist{
		width:1180px;
		margin:0 auto;
		.deanforuml{
			float:left;
			width:820px;			
			.deanarticles{
				ul li{
					background:#fff;
					margin-bottom:15px;
					width:845px;
					padding:15px;
					border:1px solid #eaeaea;
					border-radius:4px;
					position:relative;
					&:hover .deansideline{
						height:185px;
					}
					.deansideline{
						width:6px;
						height:0;
						position:absolute;
						background:#039be5;
						left:0;
						top:0;
						transition:all 0.4s ease-in-out;
					}
					.deanarticleimg{
						width:250px;
						height:155px;
						position:relative;
						float:left;
						overflow:hidden;
						img{
							width:250px;
							height:155px;
							position:absolute;
							top:0;
							left:0;
						}
						em{
							position: absolute;
							left:-355px;
							top:0;
							width:250px;
							height:155px;
							background-image: linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.7),rgba(255,255,255,0));
							transition: 0.4s;
							-webkit-transform: skewx(-25deg);
							cursor:pointer;
							font-style:normal;
						}
						.deanbkname{
							padding:2px 12px;
							text-align:center;
							height:25px;
							line-height:25px;
							background:#039be5;
							position:absolute;
							top:0;
							left:0;
							box-shadow:0 1px 1px rgba(0,0,0,0.1);
							a{
								color:#fff;
								font-size:12px;
							}
						}
					}
					.deanarticleinfo{
						width:580px;
						float:right;
						h5{
							width:100%;
							height:20px;
							line-height:20px;
							overflow:hidden;
							white-space:nowrap;
							text-overflow:ellipsis;
							margin-bottom:5px;
							a{
								font-size:16px;
								color:#333;
								transition:0.5s all;
								&:hover{
									color: #039BE5;
								}
							}
						}
						p{
							font-size:14px;
							color:#777;
							line-height:22px;
							height:66px;
							margin-bottom:35px;
						}
						.deanyuedu{
							height:25px;
							line-height:25px;
							.deanzuozhe{
								float:left;
								a{
									display:block;
									width:auto;
									height:25px;
									line-height:25px;
									span{
										display:block;
										float:left;
										margin-right:10px;
										&.deanavator{
											width:25px;
											height:25px;
											img{
												width:25px;
												height:25px;
												border-radius:50%;
											}
										}
										&.deanuser{
											width:60px;
											height:25px;
											line-height:25px;
											font-size:12px;
											color:#999;
											overflow:hidden;
											white-space:nowrap;
											text-overflow:ellipsis;
										}
									}
								}
							}
							.deanyueduinfo{
								float:left;
								span{
									display:inline-block;
									margin-right:10px;
									padding-left:20px;
									font-size:12px;
									color:#999;
									&.deandate{
										background:url(../img/img2/clock.png) left center no-repeat;
									}
								}
							}
						}
					}
					.deandetails{
						position:absolute;
						bottom:18px;
						right:0;
						background:#039be5;
						height:30px;
						line-height:30px;
						padding:0 10px;
						display:block;
						border-radius:2px 0 0 2px;
						box-shadow:0 1px rgba(0,0,0,0.1);
						font-size:12px;
						color:#fff;
						cursor:pointer;
						transition:all 0.5s;
						&:hover{
							background: #595959;
    						color: #fff;
						}
					}
				}
			}
		}
		/*-- 右部--*/
		.deanforumr{
			float:right;
			width:280px;
			.ad1,.ad2,.ad3{
				width:280px;
				height:100px;
				margin-bottom:20px;
				overflow:hidden;
				img{
    			    width:280px;
    				height:100px;
				} 
				
			}
			/*--标签--*/
			.deantags{
				ul li{
					float:left;
					margin-right:10px;
					margin-bottom:10px;
					a{
						display:block;
						padding:3px 10px;
						border:1px solid #dce4eb;
						color:#888;
						font-size:12px;
						&:hover{
							background:rgb(244,247,248);
							color:#ababab;
						}
					}
				}
			}
			/*--试用达人--*/
			.deandesign{
				ul li{
					padding-bottom:20px;
					margin-bottom:20px;
					border-bottom:1px solid #dfdfdf;
					.deandesignimg{
						width:64px;
						height:64px;
						float:left;
						img{
							width:64px;
							height:64px;
							border-radius:50%;
							border:2px solid #fff;
						}
					}
					.deandesigninfo{
						width:140px;
						float:left;
						margin-left:10px;
						a{
							color:#333;
							font-size:12px;
						}
						.deandesigninfos{
							font-size:12px;
							color:#6a6a6a;
							margin-top:5px;
						}
					}
					a.deanguanzhu{
						height:30px;
						width:60px;
						border:1px solid #dce4eb;
						color:#888;
						font-size:12px;
						float:right;
						text-align:center;
						line-height:30px;
						transition:all 0.5s;
						position:relative;
						&:hover{
							color:#039be5;
							border:1px solid #039be5;
							animation:doudong 1s;
						}
					}
				}
			}
			/*--关注我们--*/
			.deangzwm{
				width:280px;
				.deanwx{
					float:left;
					width:146px;
				}
				.deangzwmr{
					float:right;
					width:120px;
					dl dd{
						margin-top:12px;						
						a{
							display:block;
							height:30px;
							line-height:30px;
							width:118px;
							text-align:center;
							border:1px solid #dce4eb;
							font-size:14px;
							color:#888;
							transition:all 0.5s;
							position:relative;
							&:hover{
								color:#fff;
								border:1px solid #039be5;
								background:#039be5;
							}
							&:hover i{
								width:100%;
								height:100%;
								opacity:0.5;
								top:0;
								left:0;
							}
							i{
								position: absolute;
								display: inline-block;
								width:60%;
								height:60%;
								top:6px;
								left:25px;				
								z-index: 1;
								transition: all 0.3s;
								background-color:rgba(255,255,255,0.6);
								opacity:0;
							}
						}
						
					}
				}
			}
		}
	}
}
/*--------------------------登录框----------------------------*/
td{
	display:table-cell;
}
.wei_login{
	table{
		empty-cells:show;
		border-collapse:collapse;
		.t_l,.t_c,.t_r,.m_l,.m_r,.b_l,.b_c,.b_r{
			overflow:hidden;
			background:#000;
			opacity:0.2;
		}
		.t_l,t_r,.b_l,.b_r{
			width:8px;
			height:8px;
		}
		.t_l{
			-webkit-border-radius:8px 0 0 0;
		}
		.t_r{
			-webkit-border-radius: 0 8px 0 0;
		}
		.b_l{
			-webkit-border-radius: 0 0 0 8px;
		}
		.b_r{
			-webkit-border-radius: 0 0 8px 0 ;
		}
		.t_c,.b_c{
			height:8px;
			width:520px;
		}

		.m_l{
			width:8px;
			height:288px;
		}
		.m_c{
			background:#fff;
			padding:0;
			width:520px;
			height:288px;
			#layer_login{
				width:520px;
				height:288px;
				h3.flb{
					padding:10px 10px 8px;
					height:20px;
					line-height:20px;
					em{
						float:left;
						font-size:14px;
						font-weight:700;
						color:#369;
						font-style:normal;
					}
					span{
						float:right;
						color:#999;
						a.flbc{
							float:left;
							margin-left:8px;
							font-weight:400;
							color:#333;
							width:20px;
							height:20px;
							overflow:hidden;
							background:url(../public/img/cls.gif) no-repeat 0 0;
							cursor:pointer;
							&:hover{
								background-position:0 -20px;
							}
						}
					}
				}
				form{
					width:520px;
					height:250px;
					.con{
						padding:0 10px 10px;
						.rfm{
							font-size:15px;
							margin:0 auto;
							width:500px;
							text-align:center;
							padding-top:10px;
							label{
								line-height:24px;
								cursor:pointer;
							}
							input{
								height:17px;
								padding:2px 4px;
								line-height:17px;
								border:1px solid;
								border-color:#848484 #e0e0e0 #e0e0e0 #848484;
							}
							a{
								color:#369;
								font-size:13px;
							}
							select{
								padding:2px 2px 2px 1px;
							}
						}
						.bw0{
							background:transparent;
							label{
								margin-left:-150px;
								font-size:13px;
								input{
									position:relative;
									top:4px;
									outline:none;
								}
							}
							hr{
								height:1px;
								border:none;
								background:#cdcdcd;
								color:#cdcdcd;
								margin-bottom:5px;
							}	
							span{
								margin-left:-100px;
							}	
							a{
								position:relative;
								top:5px;
							}					
						}
						.mbw{
							margin-bottom:5px;
							margin-left:-15px;
							button{
								height:30px;
								width:200px;
								background:#e5e5e5 url(../public/img/pn.png) repeat-x 0 -48px;
								color:#fff;
								border:none;
							}
						}
					}
				}
			}
		}
	}
}











